<template>
  <md-page
    title="积分详情"
    isBtn
    :btnTextItems="data.btnTextItems"
    backUrl="/pages/my/index"
    @btnClick="bottomBtnClick"
    isRefresh
    @pullDownRefresh="handlePullDownRefresh">
    <div class="container">
      <div class="title">用户信息</div>
      <view class="list">
        <view class="list-item img">
          <view class="left">头像</view>
          <image class="image" :src="data.info?.avatar" mode="widthFix"></image>
        </view>
        <view class="list-item">
          <view class="left">昵称</view>
          <view class="right">
            {{ data.info?.username || '用户昵称' }}
          </view>
        </view>
        <view class="list-item">
          <view class="left">手机号</view>
          <view class="right">
            {{ data.info?.mobile }}
          </view>
        </view>
        <view class="list-item">
          <view class="left">扣除积分</view>
          <view class="right">
            {{ data.info?.score || '0' }}
          </view>
        </view>
        <view class="list-item">
          <view class="left">交易时间</view>
          <view class="right">
            {{ data.info?.createtime || '0' }}
          </view>
        </view>
      </view>
    </div>
  </md-page>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import type { BtnTextItem } from '@/components/md-ui/components/md-page/md-page.vue';
import { cancelScoreRecord, scoreRecordDetail } from '@/api';

const data = reactive<any>({
  qr_data: '',
  info: {
    avatar: '',
    username: '',
    age: '',
    points: '',
  },
  configInfo: {},
  btnTextItems: [],
  points: '',
});

// 后台控制按钮样式
let commonStyle = (type: number) => ({
  color: data.configInfo?.['button_color' + type] || '#1CA4C0',
  textColor: data.configInfo?.['button_color' + type + '_text'] || '#ffffff',
});

const bottomBtnClick = async (info: { item: BtnTextItem }) => {
  const { key } = info.item;
  if (key === 'confirm') {
    uni.showModal({
      title: '提示',
      content: '请确认是否撤销该条记录',
      success: res => {
        if (res.confirm) {
          fetchCancelScoreRecord();
        }
      },
    });
  }
};

/**
 * 接口相关
 */
// 扫码积分详情
const fetchScoreDetail = async (record_id: string) => {
  try {
    const res = await scoreRecordDetail({
      record_id,
    });
    data.info = res.data;
    data.btnTextItems = [{ text: '撤销', key: 'confirm', ...commonStyle(1), hide: !res.data?.can_cancel }];
  } catch (error) {}
};

// 积分抵扣
const fetchCancelScoreRecord = async () => {
  try {
    const res = await cancelScoreRecord({
      record_id: data.record_id,
    });
    uni.showModal({
      title: '提示',
      content: res?.msg || '撤销成功',
      showCancel: false,
      success: res => {
        if (res.confirm) {
          uni.navigateBack();
        }
      },
    });
  } catch (error) {}
};

onLoad(options => {
  data.record_id = options?.record_id;
  if (data?.record_id) {
    fetchScoreDetail(data.record_id);
  }
  const configInfo = uni.getStorageSync('configInfo') ? JSON.parse(uni.getStorageSync('configInfo')) : '';
  if (configInfo) {
    data.configInfo = configInfo;
  }
});

/**
 * 下拉刷新
 */
const handlePullDownRefresh = () => {
  fetchScoreDetail(data.record_id);
};
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  & > .title {
    width: 100%;
    height: 110rpx;
    line-height: 110rpx;
    color: $warn;
    border-radius: 30rpx 30rpx 0 0;
    background: white;
    font-size: 40rpx;
    text-align: center;
  }
  .list {
    background: #ffffff;
    .list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 10rpx;
      padding: 30rpx 20rpx;
      box-sizing: border-box;
      font-size: 28rpx;
      color: $title;
      &.img {
        padding: 14rpx 20rpx;
      }
      .avatar-wrapper {
        border: none;
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
        overflow: hidden;
        padding: 0;
        margin: 0;
      }
      .image {
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
        overflow: hidden;
      }
    }
  }
  .operation {
    padding: 30rpx;
    background: white;
    border-radius: 30rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 28rpx;

    .input {
      width: 100%;
      height: 90rpx;
      display: flex;
      align-items: center;
      border-radius: 30rpx;
      border: 1rpx solid $warn;
      padding: 0 30rpx;
      box-sizing: border-box;
    }
  }
}
</style>
